<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="true" />
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- 360强制全屏 -->
<meta name="360-fullscreen" content="true" />

    <title>Title</title>

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <style>
        .clearfix:after{
            display:table;
            content:"";
            clear:both;
        }
        #footer{
            width:100%;
            height:1.5rem;
            background:red;
            position:fixed;
            bottom:0px;
        }
        #header{
            width:100%;
            height:1rem;
            background:red;
            position:fixed;
            top:0px;
            color:white;
        }
        #footer>div{
            float:left;
            width:20%;
            height:1.5rem;
            line-height:1.5rem;
            text-align:center;
            color:white;
        }
        .leftbtn{
            position:absolute;
            left:10px;
            top:0px;
            height:1rem;
            line-height:1rem;
        }
        .rightbtn{
            position:absolute;
            right:10px;
            top:0px;
            height:1rem;
            line-height:1rem;
        }
        .title{
            height:1rem;
            line-height:1rem;
            text-align:center;
        }
        body{
            padding-top:1.1rem;
            padding-bottom:1.6rem;
        }
        #content{
            width:96%;
            margin:0 auto;
        }
        img{
            vertical-align: middle;
            border:none;
            width:100%;
        }
        video{
            margin-top:0.1rem;
        }
        #picbox{
            width:10rem;
            overflow:hidden;
        }
        #picinbox{
            width:40rem;

        }
        #picinbox img{
            width:10rem;
            float:left;
        }
    </style>
    <script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>

</head>
<body>

<div id="header" class="clearfix">
    <div class="leftbtn">登录</div>
    <div class="title">视频</div>
    <div class="rightbtn">注册</div>
</div>
<div id="picbox">
        <div id="picinbox">
          <img src="7.jpg" />
          <img src="8.jpg" />
          <img src="9.jpg" />
          <img src="7.jpg" />
        </div>
    </div>

<div class="content" id="content">

    

    <div>
        <video id="vjs_27178313_html5_api" data-id="27178313" class="topic-xx-video x-video j-player" data-tag="2018-01-30|无|痛经按几个穴位就能缓解……快转给女票吧！|27178313|无" width="100%" poster="http://wimg.spriteapp.cn/picture/2018/0127/46a230a4-0373-11e8-bc64-1866daeb0df1_wpd.jpg" webkit-playsinline="" playsinline="" x-webkit-airplay="true" controls="" preload="none">
            <source src="http://mvideo.spriteapp.cn/video/2018/0127/46a230a4-0373-11e8-bc64-1866daeb0df1_wpc.mp4" type="video/mp4">
        </video>
        <video id="vjs_27179362_html5_api" data-id="27179362" class="topic-xx-video x-video j-player" data-tag="2018-01-30|无|给媳妇闺蜜夹菜测试媳妇反应 这双眼神能杀人|27179362|无" width="100%" poster="http://wimg.spriteapp.cn/picture/2018/0128/27179362_700.jpg" webkit-playsinline="" playsinline="" x-webkit-airplay="true" controls="" preload="none">
            <source src="http://mvideo.spriteapp.cn/video/2018/0128/21f3d1d8-03da-11e8-bc64-1866daeb0df1cutblack_wpc.mp4" type="video/mp4">
        </video>
        <video id="vjs_27176548_html5_api" data-id="27176548" class="topic-xx-video x-video j-player" data-tag="2018-01-30|无|成功率超高的表白神技，~有创意！|27176548|无" width="100%" poster="http://wimg.spriteapp.cn/picture/2018/0127/4efda6b4-032f-11e8-9afa-1866daeb0df1_wpd.jpg" webkit-playsinline="" playsinline="" x-webkit-airplay="true" controls="" preload="none">
            <source src="http://mvideo.spriteapp.cn/video/2018/0127/4efda6b4-032f-11e8-9afa-1866daeb0df1_wpc.mp4" type="video/mp4">
        </video>
    </div>
</div>

<div id="footer" class="clearfix">
    <div>视频</div>
    <div onclick="javascript:location='9.html'">图片</div>
    <div>新闻</div>
    <div>音乐</div>
    <div>广播</div>
</div>

<script>
   setInterval(f,5000);

   var i = 0;

   function f(){
       var timer = setInterval(picscroll,10);
       var sw = document.documentElement.clientWidth;
       console.log(sw);

       function picscroll(){
           i = i + 5;
           console.log(i);
           if(i==sw*3){
               i = 0;
               clearInterval(timer);
               return;
           }
           //320
           picbox.scrollLeft = i;
           if(i%sw==0&&i!=0){
               clearInterval(timer);
           }
       }
   }
</script>

</body>
</html>